<template>

  <a-form-model
    :model="dataForm"
    :rules="dataRule"
    ref="dataForm"
  >
    <a-row>
      <a-col :span="24" class="a-col">
        <a-form-model-item label="审批选项" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="flag">
          <a-radio-group v-model="dataForm.flag" @change="onChange">
            <a-radio-button :key="key" v-for="(val,key) in approvalTypeFlag" :value="key">{{ val }}</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
      </a-col>
      <a-col :span="24" class="a-col" v-if="showNode" >
        <a-form-model-item label="撤回到节点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="runNodeId">
          <a-select v-model="dataForm.runNodeId" @change="handleChange">
            <a-select-option v-for="(val, key) in runNodes" :key="key" :value="key" >
              {{ val }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="24" class="a-col">
        <a-form-model-item label="审批说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="opinion">
          <a-input type="textarea" v-model="dataForm.opinion"></a-input>
        </a-form-model-item>
      </a-col>

      <a-col :span="24" class="a-col">
        <!-- <div class="timeline-item">
          <a-timeline >
            <a-timeline-item
              v-for="(item, index) in approvalList"
              :key="index"
              size="large"
              color="#67C23A"
            >{{ item.createTime }}
              <a-alert
                :message="item.taskNodeName+'： '+item.opName"
                :type="item.style"
                :closable="false"
                show-icon>
                <p slot="description">
                  <span>{{ '审批选项：'+item.flagStr }}</span><br/>
                  <span>{{ '审批意见：'+item.opinion }}</span>
                </p>
              </a-alert>
            </a-timeline-item>
          </a-timeline>
        </div> -->

        <a-table
          :columns="columns"
          :data-source="approvalList"
          bordered
          :pagination="false"
          :scroll="{ y: 300 }"
        >
        </a-table>
      </a-col>

      <a-col :span="24" style="text-align: center;">
        <a-button class="btu" @click="onClose" >
          取消
        </a-button>
        <a-button type="primary" :disabled="formSubmit" class="btu" @click="dataFormSubmit" >
          确定
        </a-button>
      </a-col>

    </a-row>
  </a-form-model>

</template>

<script>
  import { getAction, postAction } from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin'

  export default {
    name: 'ApprovalOp',
    mixins: [mixinDevice],
    components: {
    },
    data() {
      return {
        approvalList: [],
        task: {},
        approvalTypeFlag: [],
        dataForm: {},
        dataRule: {
            flag: [
                { required: true, message: '请选择审批类型！', trigger: 'blur' }
            ],
            opinion: [
                { required: true, message: '请输入审批意见！', trigger: 'blur' }
            ],
            runNodeId: [
              { required: true, message: '请选择需要撤回到的节点！', trigger: 'blur' }
            ]
        },
        formSubmit: false,
        labelCol: {
          xs: { span: 6 },
          sm: { span: 2 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        runNodes: {},
        showNode: false,
        columns: [
          {
            title: '审批时间',
            dataIndex: 'createTime'
          },
          {
            title: '任务节点',
            dataIndex: 'taskNodeName'
          },
          {
            title: '审批人',
            dataIndex: 'opName'
          },
          {
            title: '审批项',
            dataIndex: 'flagStr'
          },
          {
            title: '审批说明',
            dataIndex: 'opinion'
          }
        ]
      }
    },
     watch: {
        'dataForm.flag': function (val) {
            let that = this
            that.dataForm.opinion = that.approvalTypeFlag[val]
            // 审批选择撤回到指定节点时,指定节点不能为空
        }
    },
    methods: {
      handleChange(val) {
        console.log('选择撤回的节点', val)
      },
      onClose() {
        this.$emit('close')
      },
      dataFormSubmit() {
          this.$refs.dataForm.validate(valid => {
           if (valid) {
             this.formSubmit = true
               let url = '/approval/handle'
              postAction(url, this.dataForm).then(res => {
                  console.log('提交审批', res)
                  if (res.success) {
                    this.$message.success(res.message)
                    this.onClose()
                    this.$emit('getList')
                  } else {
                    this.$message.warning(res.message)
                  }
              })
          }
       })
      },
      onChange(e) {
          console.log(`checked = ${e.target.value}`)
          if (e.target.value === '6') {
            this.showNode = true
          } else {
            this.showNode = false
            this.dataForm.runNodeId = ''
          }
       },
      // 获取审批记录
      getApprovalList() {
        let url = '/approval/detail'
        let processInstanceId = this.task.processInstanceId
        getAction(url, { processId: processInstanceId }).then(res => {
          // 审批记录
          this.approvalList = res.result
          console.log('获取审批记录', res)
        })
      },
      // 获取审批选项
      getApprovalFlag() {
        let url = 'approval/taskDynamicConf'
        let id = this.task.id
        getAction(url, { taskId: id }).then(res => {
          this.approvalTypeFlag = res.result.approvalTypeFlag
          // 已经审批节点
          this.runNodes = res.result.runNodes
          console.log('获取审批选项', res)
        })
      },
      openOp(task) {
        this.task = task
        this.dataForm.taskId = task.id
        console.log('任务信息', this.task)
        this.getApprovalList()
        this.getApprovalFlag()
      }
    }
  }
</script>

<style>
   @import '~@assets/less/common.less';

.ant-form-item {
    margin-bottom: 0px;
}
.btu{
  margin: 0.3125rem;
}
.a-col{
  padding: 0.625rem;
}
.timeline-item{
  max-height: 400px;
  overflow-y: auto;
}
.ant-timeline{
  margin-right: 10px;
}
.ant-alert-with-description {

    padding: 10px 10px 0px 55px;
}
.ant-alert-with-description .ant-alert-icon {
    left: 16px;
}
.ant-alert-with-description .ant-alert-message{
  font-size: 13px;
}
.ant-alert-description {
    font-size: 10px;
}
</style>
